<script setup lang="ts">
import { ref, onMounted } from "vue";
import { formRules } from "./utils/rule";
import { FormProps } from "./utils/types";
import { getDeptListApi } from "@/api/system/dept";
import { setDisabledForTreeOptions, handleTree } from "@/utils/tree";
	import { UploadPut } from "@/api/common/upload";
	import { message } from "@/utils/message";

/** TODO 有其他方式  来换掉这个props 父子组件传值吗？ */
const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    userName: "",
    userPhone: null,
    bfDept: 0,
    bfUserName: "",
    lfRs: 0,
    lfSy: "",
    fkCl: "",
    fkRl: "",
    xgTp: "",
    qtBc: "",
    status: "",
	lfDateRange: ""
  })
});

const visitingData: any = ref(props.formInline);

	const fileList = visitingData.value?.fkRl.split(',').filter((v) => v).map((v) => {
		return {
			url: v
		}
	});

  const fileList1 = visitingData.value?.xgTp.split(',').filter((v) => v).map((v) => {
  	return {
  		url: v
  	}
  });

const deptOptions = ref([]);// ref(props.deptListOptions);

onMounted(async () => {
  const { data } = await getDeptListApi();
  const deptListOptions = setDisabledForTreeOptions(handleTree(data), "status");
  deptOptions.value = deptListOptions;
})

const formRuleRef = ref();


	function beforeUpload(file) {
		const isJPGPNG = file.type === 'image/jpeg' || file.type === 'image/png';
		const isLt500K = file.size / 1024 / 1024 < 0.5;

		if (!isJPGPNG) {
			message(`上传头像图片只能是 JPG/PNG 格式!`, {
			  type: "warning"
			});
			return false;
		}
		if (!isLt500K) {
			message(`上传头像图片大小不能超过 500KB!`, {
			  type: "warning"
			});
			return false;
		}
		return true;
	}
	async function handleUpload(request) {
		const file = request.file;
		try {
			const d = await UploadPut({
				file
			})
			visitingData.value.fkRl = d.url
			message(`文件上传成功`, {
			  type: "success"
			});
		} catch {
			visitingData.value.fkRl = ""
			message(`文件上传失败`, {
			  type: "error"
			});
		}
	}

  async function handleUpload1(request) {
  	const file = request.file;
  	try {
  		const d = await UploadPut({
  			file
  		})
		fileList1.push({
			uid: file.uid,
			url: d.url
		})
      visitingData.value.xgTp += visitingData.value.xgTp ? ',' + d.url : d.url;
  		message(`文件上传成功`, {
  		  type: "success"
  		});
  	} catch {
  		message(`文件上传失败`, {
  		  type: "error"
  		});
  	}
  }

	function handleUploadRemove(uploadFile, uploadFiles) {
		visitingData.value.fkRl = ""
	}


  function handleUploadRemove1(uploadFile, uploadFiles) {
	  if (fileList1.length != 0) {
		  let index = -1;
		  for (let i = 0; i < fileList1.length; i++){
		  		  if (fileList1[i].uid == uploadFile.uid) {
		  			  index = i;
		  		  }
		  }
		  if (index != -1) {
		  		  fileList1.splice(index, 1);
		  		  visitingData.value.xgTp = fileList1.map(v => v.url).join(',');
		  }
	  } else {
		  visitingData.value.xgTp = ""
	  }
  }

  function getFormRuleRef() {
    return formRuleRef.value;
  }

defineExpose({ getFormRuleRef });
</script>

<template>
  <el-form
    ref="formRuleRef"
    :model="visitingData"
    :rules="formRules"
    label-width="82px"
  >

  <el-form-item label="来访日期" prop="lfDateRange">
<!-- 	<el-date-picker
		v-model="visitingData.lfTime"
		type="daterange"
		placeholder="请选择来访日期"
		format="YYYY-MM-DD HH:mm:ss"
		date-format="MMM DD, YYYY"
		time-format="HH:mm"
		value-format="YYYY-MM-DD HH:mm:ss"
	  /> -->
	  <el-date-picker
		  v-model="visitingData.lfDateRange"
		  type="datetimerange"
		  unlink-panels
		  range-separator="至"
		  start-placeholder="到访开始时间"
		  end-placeholder="到访结束结束时间"
		  placeholder="请选择来访日期"
		  format="YYYY-MM-DD HH:mm:ss"
		  date-format="YYYY/MM/DD ddd"
		  time-format="A hh:mm:ss"
		  value-format="YYYY-MM-DD HH:mm:ss"
		/>
  </el-form-item>
    <el-form-item label="申请人" prop="userName">
      <el-input
        v-model="visitingData.userName"
        clearable
        placeholder="请输入申请人"
      />
    </el-form-item>

    <el-form-item label="申请人电话" prop="userPhone">
      <el-input
        v-model="visitingData.userPhone"
        clearable
        placeholder="请输入申请人电话"
      />
    </el-form-item>
    <el-form-item label="拜访部门" prop="bfDept">
      <el-cascader
        class="w-full"
        v-model="visitingData.bfDept"
        :options="deptOptions"
        :props="{
          value: 'id',
          label: 'deptName',
          emitPath: false,
          checkStrictly: true
        }"
        clearable
        placeholder="请选择拜访部门"
      />
    </el-form-item>
    <el-form-item label="拜访人" prop="bfUserName">
      <el-input
        v-model="visitingData.bfUserName"
        clearable
        placeholder="请输入拜访人"
      />
    </el-form-item>

    <el-form-item label="来访人数" prop="lfRs">
      <el-input
        v-model="visitingData.lfRs"
        clearable
        placeholder="请输入来访人数"
      />
    </el-form-item>

    <el-form-item label="来访事由" prop="lfSy">
      <el-input
        v-model="visitingData.lfSy"
        clearable
        placeholder="请输入来访事由"
        rows="3"
        type="textarea"
      />
    </el-form-item>

    <el-form-item label="访客车牌" prop="fkCl">
      <el-input
        v-model="visitingData.fkCl"
        clearable
        placeholder="访客车牌"
      />
    </el-form-item>

    <el-form-item label="访客人脸" prop="fkRl">
    	<el-upload v-model:file-list="fileList" list-type="picture" :limit="1" :http-request="handleUpload" :before-upload="beforeUpload" :on-remove="handleUploadRemove">
    		<el-button size="small" type="primary">点击上传</el-button>
    		<div slot="tip" style="margin-left: 5px">只能上传jpg/png文件，‌且不超过500kb</div>
    	</el-upload>
    </el-form-item>

    <el-form-item label="相关图片" prop="xgTp">
    	<el-upload v-model:file-list="fileList1" list-type="picture" :http-request="handleUpload1" :before-upload="beforeUpload" :on-remove="handleUploadRemove1">
    		<el-button size="small" type="primary">点击上传</el-button>
    		<div slot="tip" style="margin-left: 5px">只能上传jpg/png文件，‌且不超过500kb</div>
    	</el-upload>
    </el-form-item>

    <el-form-item label="其它补充" prop="qtBc">
      <el-input
        v-model="visitingData.qtBc"
        clearable
        placeholder="请输入其它补充"
        rows="3"
        type="textarea"
      />
    </el-form-item>

    <el-form-item label="审核状态" prop="status">
      <el-select
        v-model="visitingData.status"
        placeholder="请选择审核状态"
        clearable
        class="!w-[180px]"
      >
        <el-option
          key="0"
          label="待审批"
          :value="0"
        />
        <el-option
          key="1"
          label="已审批待来访"
          :value="1"
        />
        <el-option
          key="2"
          label="审批未通过"
          :value="2"
        />
        <el-option
          key="9"
          label="已来访"
          :value="9"
        />
      </el-select>
    </el-form-item>
  </el-form>
</template>
